<template>
	<view class="container" :class="{ dark: isDarkMode }"
		:style="'background-size: 100% auto; height: 100vh; background-image: url(' + bgImage + '); background-size: 100% auto; background-position: center center;'"
		v-if="boxInfo">

		<!-- #ifndef H5 -->
		<TextNavBar :darkMode="isDarkMode" :title="boxInfo.title"></TextNavBar>
		<!-- #endif -->

		<!-- 头像 -->
		<navigator url="/pages/myScore/index">
			<view class="float-headimg-c">
				<image mode="aspectFill" class="headimg" :src="userInfo.headimg"></image>
				<view class="score">{{ userInfo.score | bigNumberDisplay }}{{ scoreAlias }}</view>
			</view>
		</navigator>

		<!-- 规则 -->
		<navigator url="/pages/rule/index?type=box">
			<view class="float-btn rule" hover-class="hover">
				<!-- <image mode="aspectFill" src="@/static/smallBox/rule.png"></image> -->
				<text>规则</text>
			</view>
		</navigator>

		<!-- 我的 -->
		<navigator url="/pages/myBox/index">
			<view class="float-btn my" hover-class="hover">
				<!-- <image mode="aspectFill" src="@/static/smallBox/my-box.png"></image> -->
				<text>盒柜</text>
			</view>
		</navigator>

		<!-- 我的 -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="float-btn share" hover-class="hover" @tap="isSharePopup = true">
			<text class="new-iconfont icon-wechat"></text>
			<text>分享</text>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-TOUTIAO -->
		<button class="float-btn share" open-type="share" hover-class="hover">
			<text class="new-iconfont icon-wechat"></text>
			<text>分享</text>
		</button>
		<!-- #endif -->

		<view class="float-btn rand-list" hover-class="hover" v-if="boxInfo.isHiddenSkuRank"
			@tap="isShowHiddenSkuRank = true">
			<!-- <text class="new-iconfont icon-wechat"></text> -->
			<text>榜单</text>
		</view>

		<view class="body">
			<view class="yaoyiyao" :class="{ small: isSmallDevice }" v-if="boxInfo.openMode == 1 && (freeTipLimit > 0)">
				<!-- <image src="/static/smallBox/yaoyiyao.png"></image> -->
				<text>摇一摇</text>
			</view>
			<view class="box" :class="{ small: isSmallDevice }">
				<view class="box-img" :class="{ move: animateStatus === 1, move2: animateStatus === 2 }">
					<image :src="boxInfo.sku3dImage || defaultBoxImage"></image>
				</view>
			</view>
			<view class="box-number">
				<text>NO.{{ roomInfo.number }}-{{ skuIndex }}</text>
				<view class="inner-tips">{{ boxTips }}</view>
			</view>
			<!-- 在线开盒子 -->
			<view class="card-list" v-if="boxInfo.openMode == 1">
				<view class="item" @tap="isShowExcludeCard = true" hover-class="hover" v-if="boxInfo.isExcludeBox">
					<!-- <image src="@/static/smallBox/tips.png"></image> -->
					<text>排除卡</text>
				</view>
				<view class="item" @tap="isShowOpenCard = true" hover-class="hover" v-if="boxInfo.isShowBox">
					<!--<image src="@/static/smallBox/toushi.png"></image>-->
					<text>透视卡</text>
				</view>
			</view>
			<view class="tips" v-else>
				<!-- 线下开盒子 -->
				<view>温馨提示: 此盲盒购买后将随机发货, 不进行在线开盒</view>
			</view>
			<scroll-view class="thumb-list" :class="{ small: isSmallDevice }" scroll-x>
				<view v-for="(item, index) in skuList" class="item" :key="index">
					<image mode="aspectFit" :src="item.thumb + '?x-oss-process=image/resize,w_300'" class="thumb"
						@tap="$refs.detailPopup.open('bottom')"></image>
					<view class="title">{{ item.title }}</view>
					<view class="price-c">
						<PriceDisplay :info="item"></PriceDisplay>
					</view>
					<view v-if="item.type === 1" class="tips">隐藏款</view>
					<view class="tips-bottom excluded" v-if="isExcluded(item)">这不是我</view>
					<view class="tips-bottom showed" v-else-if="isShowed(item)">这是我</view>
				</view>
			</scroll-view>
		</view>
		<view class="footer safe-area-bottom" :class="{ small: isSmallDevice }">
			<view class="btns">
				<view class="button" hover-class="hover" @tap="changeone">
					<!-- <image src="@/static/smallBox/refresh.png"></image> -->
					<text>换一盒</text>
				</view>
				<view class="button disable" hover-class="hover" @tap="showPreviewTips"
					v-if="boxInfo.isPresell && !boxInfo.presellMode">
					预售中
				</view>
				<view class="button" hover-class="hover" @tap="buyNow" v-else>
					就买它
				</view>
			</view>
			<!-- <view class="tips"></view> -->
		</view>
		<OpenBoxPopup v-if="isOpenPopup" :config="baseConfig" :order="order" @close="goBack"
			:boxImg="boxInfo.sku3dImage">
		</OpenBoxPopup>
		<view class="box-tips" :hidden="!isShowTips">
			<view class="close-btn" @tap="isShowTips = false">
				<text class="new-iconfont icon-wrong"></text>
			</view>
			<view class="text">
				{{ tips }}
			</view>
		</view>
		<!-- <view class="history-box" :hidden="!showHistoryTips" @tap="showHistoryTipsChange">
			<view class="history-wrap" @tap.stop>
				<view class="history-wrap-title">提示卡</view>
				<view class="history-list">
					<view class="item" v-for="(item,index) in historyTips" :key="index">
						{{item}}
					</view>
				</view>
			</view>
		</view> -->

		<view class="tips-card-c" v-if="isShowExcludeCard">
			<view class="tips-content  animated bounceInLeft">
				<view class="title-c">
					<view class="title">排除卡</view>
					<navigator url="/pages/myCard/index">
						<view class="total">
							{{ excludeBoxCard.balance }}张<text class="new-iconfont icon-arrow-right"></text>
						</view>
					</navigator>
				</view>
				<view class="item-title">
					卡券功能
				</view>
				<view class="item-text">
					使用排除卡可以排除盒子里不是某个款
				</view>
				<view class="item-title">
					兑换方式
				</view>
				<view class="item-text">
					消耗{{ excludeBoxCard.scorePrice }}{{ scoreAlias }}兑换
				</view>

				<navigator url="/pages/myCard/index" v-if="!excludeBoxCard.balance">
					<view class="get-btn">
						暂无可用，去兑换
					</view>
				</navigator>
				<view class="get-btn" @tap="useCard('exclude_box')" v-else>
					使用1张排除卡
				</view>

			</view>
			<view class="close-btn  animated bounceInRight" @tap="isShowExcludeCard = false">
				<text class="new-iconfont icon-wrong"></text>
			</view>
		</view>

		<view class="tips-card-c" v-if="isShowOpenCard">
			<view class="tips-content  animated bounceInLeft">
				<view class="title-c">
					<view class="title">透视卡</view>
					<navigator url="/pages/myCard/index">
						<view class="total">
							{{ showBoxCard.balance }}张<text class="new-iconfont icon-arrow-right"></text>
						</view>
					</navigator>
				</view>
				<view class="item-title">
					卡券功能
				</view>
				<view class="item-text">
					使用透视卡可以直接显示盒子里的款式
				</view>
				<view class="item-title">
					兑换方式
				</view>
				<view class="item-text">
					消耗{{ showBoxCard.scorePrice }}{{ scoreAlias }}兑换
				</view>

				<navigator url="/pages/myCard/index" v-if="!showBoxCard.balance">
					<view class="get-btn">
						暂无可用，去兑换
					</view>
				</navigator>
				<view class="get-btn" @tap="useCard('show_box')" v-else>
					使用1张透视卡
				</view>
			</view>
			<view class="close-btn  animated bounceInRight" @tap="isShowOpenCard = false">
				<text class="new-iconfont icon-wrong"></text>
			</view>
		</view>

		<PayCard :buyTotal="buyTotal" v-if="isShowPayCard" :info="payCardInfo" @success="paySuccess"
			@cancel="isShowPayCard = false"></PayCard>

		<SharePopup v-if="isSharePopup" @close="isSharePopup = false" :info="posterInfo"></SharePopup>

		<Danmus v-if="danmuSetting.is_enabled" :setting="danmuSetting" :uuid="boxUuid" :list="danmuList"></Danmus>

		<uni-popup ref="detailPopup" style="z-index: 1000;" type="bottom">
			<BoxSkuPopup :skuList="skuList" :detailImageList="boxInfo.detailImages" @close="$refs.detailPopup.close()">
			</BoxSkuPopup>
		</uni-popup>

		<FreeTicketFloatBtn v-if="boxInfo.isInviteEnabled" @useFreeTicket="useFreeTicket" :uuid="boxUuid"
			nodeType="box"></FreeTicketFloatBtn>

		<HiddenSkuRank :info="boxInfo" @close="isShowHiddenSkuRank = false" v-if="boxInfo.uuid && isShowHiddenSkuRank">
		</HiddenSkuRank>

		<!-- <BoxSkuPopup :skuList="skuList" :detailImageList="boxInfo.detailImages" @close="isShowSkuList=false" v-if="isShowSkuList"></BoxSkuPopup> -->
	</view>
</template>

<script>
import mixin from "@/utils/mixin.js"

import {
	mapGetters
} from "vuex"

import PayCard from "./components/PayCard.vue"

import {
	getUsableCoupon
} from "../../api/coupons.js"

export default {
	name: "openBox",
	mixins: [mixin],
	components: {
		PayCard
	},
	data() {
		return {
			// defaultBoxImage: 'https://cdn2.hquesoft.com/box/openbox.png',
			boxUuid: '',
			roomUuid: '',
			skuIndex: '',
			pageUuid: '',
			skuList: [],
			boxInfo: {},
			roomInfo: {},
			isShowPayCard: false,
			isShowExcludeCard: false,
			isShowOpenCard: false,
			showBoxCard: {
				scorePrice: 0,
				balance: 0
			},
			excludeBoxCard: {
				scorePrice: 0,
				balance: 0
			},
			order: {},   // 创建成功的订单
			yaoyiyaoFlag: false,
			isPay: false,
			isInit: false,
			isOpenPopup: false,
			// boxInfo: {},
			animateStatus: 0,
			visible: false,
			loading: false,
			tipsList: {},
			tips: "",
			isShowTips: false,
			isSharePopup: false,
			orderUuid: "",
			danmuList: [],
			danmuSetting: {},
			buyTotal: 1,
			remainTime: 0,
			isShowSkuList: false,
			baseConfig: {},
			isShowHiddenSkuRank: false
		}
	},
	computed: {
		...mapGetters(["userInfo"]),
		defaultBoxImage() {
			return this.isInit ? 'https://cdn2.hquesoft.com/box/openbox.png' : ''
		},
		config() {
			return this.$store.getters.setting.open_box
		},
		payCardInfo() {
			return {
				box: this.boxInfo,
				room: this.roomInfo,
				sku_index: this.skuIndex,
				page_uuid: this.pageUuid
			}
		},
		deviceHeight() {
			return this.$device.screenHeight
		},
		isSmallDevice() {
			// #ifdef H5
			return true
			// #endif
			return this.$device.screenHeight < 750
		},
		instance() {
			return this.boxInfo.instance
		},
		posterInfo() {
			return {
				moneyPrice: this.boxInfo.moneyPrice,
				scorePrice: this.boxInfo.scorePrice,
				title: this.boxInfo.title,
				path: this.getShareConfig().path,
				thumb: this.boxInfo.thumb
			}
		},
		freeTipLimit() {
			if (this.boxInfo.freeTipsLimit === null)
				return 2

			return this.boxInfo.freeTipsLimit
		},
		bgImage() {
			if (!this.isInit)
				return ''

			return this.boxInfo.roomBgImage || this.config.bg_image || 'https://cdn2.hquesoft.com/box/bg.png'
		},
		isDarkMode() {
			return this.boxInfo.bgColorMode === 2
		},
		boxTips() {
			return this.boxInfo.tips || '官方正品，非质量问题不支持退换'
		},
		share() {
			return {
				title: this.boxInfo.title,
				thumb: this.boxInfo.thumb,
				desc: '',
				path: '/pages/boxDetail/index?uuid=' + this.boxInfo.uuid + '&invite_node=box-' + this.boxInfo.uuid,
			}
		},
		// productNumbers() {
		// 	let status = this.instance && this.instance.small_box_status || []
		// 	let temp = []
		// 	status.forEach((item, index) => {
		// 		if (!item) {
		// 			temp.push(index + 1)
		// 		}
		// 	})
		// 	return temp
		// }
	},
	async onLoad(e) {
		this.roomUuid = e.roomUuid
		this.skuIndex = parseInt(e.index)
		this.boxUuid = e.uuid

		// console.log('mode =====>', e.buyMode)
		// if (e.buyMode === 'wholeRoom') {
		// 	this.buyTotal = 0 
		// 	this.isShowPayCard = true
		// } 

		uni.showLoading({
			title: "加载中",
			mask: true
		})

		this.initRoom().then(res => {
			this.isInit = true
			if (e.buyMode === 'wholeRoom') {
				this.changeone()
				this.buyTotal = 0
				this.isShowPayCard = true
			}
			else if (e.buyMode) {
				// this.changeone()
				this.buyTotal = parseInt(e.buyMode)
				this.isShowPayCard = true
			}

			this.getDanmu()
		})

		uni.hideLoading()

		// this.getDanmu()

		uni.$on('startShare', () => {
			this.isSharePopup = true
		})

		uni.onAccelerometerChange(this.yaoyiyaoCallback)

	},
	onShow() {
		this.$store.dispatch("getUserInfo")
		this.initData()
		// 开始监
	},
	onUnload() {
		uni.offAccelerometerChange(this.yaoyiyaoCallback)
	},
	onHide() {
	},
	methods: {
		// 摇一摇事件处理
		yaoyiyaoCallback(res) {
			if (this.boxInfo.openMode != 1)
				return;
			if (this.yaoyiyaoFlag)
				return;
			if (this.boxInfo.freeTipsLimit === 0)
				return;

			// #ifdef APP-PLUS
			let level = 5
			// #endif
			// #ifndef APP-PLUS
			let level = 0.9
			// #endif

			// uni.showToast({
			// 	title: JSON.stringify(res),
			// 	icon: 'none'
			// })

			// return false

			if ((Math.abs(res.x) > level && Math.abs(res.y) > level) || (Math.abs(res.x) > level && Math.abs(
				res.z) > level)) {
				// uni.showToast({
				// 	title: "摇一摇"
				// })
				// console.log(res)
				if (!this.yaoyiyaoFlag) {
					this.yaoyiyaoFlag = true

					this.$playAudio('yao')

					this.getFreeTips()

					setTimeout(() => {
						this.yaoyiyaoFlag = false
					}, 1500)
				}
			}
		},
		// 使用1次兑换记录
		useFreeTicket() {
			uni.showLoading({
				title: '提交中',
				icon: 'none'
			})

			this.$http('/box-order/confirm', 'POST', {
				room_id: this.payCardInfo.room.id,
				sku_index: this.payCardInfo.sku_index,
				page_uuid: this.payCardInfo.page_uuid,
				total: 1,
				is_use_free_ticket: 1
			}).then(res => {
				uni.hideLoading()
				let info = res.data
				if (info.is_need_pay) {
					uni.showToast({
						title: '兑换出错~',
						icon: 'none'
					})
				}
				else {
					this.paySuccess(info.order)
				}
			})
		},
		getDanmu() {
			this.$http(`/danmus/box_open?node_id=${this.boxInfo.id}`).then(res => {
				this.danmuSetting = res.data.setting
				this.danmuList = res.data.list
			})
		},
		showPreviewTips() {
			uni.showToast({
				title: '此款正在预售中，暂不可购买哦~',
				icon: 'none'
			})
		},
		// 判断sku是否被排除了
		isExcluded(sku) {
			let list = this.tipsList.exclude || []
			return list.findIndex((item) => {
				return item.sku_id === sku.id
			}) !== -1
		},
		// 判断sku是否被透视
		isShowed(sku) {
			let list = this.tipsList.show || []
			return list.findIndex((item) => {
				return item.sku_id === sku.id
			}) !== -1
		},
		initRoom() {
			return this.$http(`/rooms/${this.roomUuid}/skus/${this.skuIndex}`).then(res => {
				this.boxInfo = res.data.box
				this.roomInfo = res.data.room
				this.skuList = res.data.sku_list
				this.pageUuid = res.data.page_uuid

				this.baseConfig = res.data.config

				uni.setNavigationBarTitle({
					title: this.boxInfo.title
				})
			})
		},
		initData() {
			this.$http('/user/cards').then(res => {
				this.showBoxCard = res.data.show_box_card
				this.excludeBoxCard = res.data.exclude_box_card
			})
		},
		previewSmallBoxThumb(index) {
			let urls = this.skuList.map(item => {
				return item.thumb
			})

			uni.previewImage({
				urls: urls,
				current: index
			})
		},
		showTips(tips) {
			this.tips = tips
			this.isShowTips = true
		},
		buyNow() {
			this.buyTotal = 1
			this.isShowPayCard = true
		},
		// 使用道具卡
		useCard(type) {
			let title = '温馨提示'
			let content = '确定要使用1张透视卡吗~'

			if (type === 'exclude_box') {
				title = '温馨提示'
				content = '确定要使用1张排除卡吗~'
			}
			uni.showModal({
				title: title,
				content: content,
				success: async res => {
					if (res.confirm) {
						uni.showLoading({
							title: '提交中'
						})

						this.$http('/box/use-card', 'POST', {
							card_type: type,
							page_uuid: this.pageUuid
						}).then(res => {
							this.showTips(res.data.tips)
							this.isShowExcludeCard = false
							this.isShowOpenCard = false
							this.tipsList = res.data.tips_list
							uni.hideLoading()
							this.initData()
						})
					}
				}
			})
		},
		getFreeTips() {
			uni.showLoading({
				title: '摇一摇提示中~'
			})

			this.$http('/box/use-card', 'POST', {
				card_type: 'free_tips',
				page_uuid: this.pageUuid
			}).then(res => {
				uni.hideLoading()

				this.showTips(res.data.tips)
				this.isShowExcludeCard = false
				this.isShowOpenCard = false
				this.tipsList = res.data.tips_list

			})
		},
		handleOk() {
			uni.redirectTo({
				url: "/pages/orderList/index"
			})
		},
		visibleChange() {
			this.visible = !this.visible
		},
		changeone(e) {
			this.animateStatus = 1

			// 换一个小盒子
			this.$http('/box/change-sku', 'POST', {
				room_id: this.roomInfo.id,
				sku_index: this.skuIndex,
			}).then(res => {
				this.skuIndex = res.data.sku_index
				this.roomUuid = res.data.room_uuid
				this.pageUuid = res.data.page_uuid
				this.initRoom()

				this.tipsList = {}
			})

			setTimeout(res => {
				this.animateStatus = 2
			}, 800)
		},
		paySuccess(order) {

			// 线下开盒模式直接跳转到待处理订单
			if (this.boxInfo.openMode === 2) {
				uni.redirectTo({
					url: "/pages/orderList/index"
				})
				return true
			}

			// 线上开盒流程
			this.isShowPayCard = false
			uni.showToast({
				title: "支付成功, 开盒中",
				icon: "none"
			})
			this.order = order
			this.isOpenPopup = true
		},
		goBack() {
			uni.navigateBack({
				delta: 1
			})
		}
	}
}
</script>

<style lang="scss">
page {
	// background: url('@/static/bigBox/bg.png');
	background-size: 100% 100%;
}

.tips {
	font-size: 24rpx;
	margin-top: 30rpx;
	text-align: center;
}

.tips-card-c {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0rpx;
	left: 0rpx;
	background: rgba(30, 30, 30, 0.5);
	z-index: 9;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	.tips-content {
		background: url('https://bus-cdn.hquesoft.com/box/card-bg.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		width: 666rpx;
		height: 564rpx;
		padding: 30rpx 30rpx;
		box-sizing: border-box;

		.title-c {
			display: flex;
			align-items: center;

			.title {
				font-size: 46rpx;
				font-weight: bold;
				color: #FFFFFF;
				flex-grow: 1;
			}

			.total {
				background: rgba(0, 0, 0, 0.2);
				text-align: center;
				color: white;
				padding: 4rpx 26rpx 4rpx 26rpx;
				border-radius: 30rpx;
				font-weight: 500;

				display: flex;
				align-items: center;

				.icon-arrow-right {
					font-size: 40rpx;
					width: 24rpx;
					margin-left: -8rpx;
					// margin: 0rpx !important;
					padding: 0rpx !important;
					display: inline;
				}
			}
		}

		.item-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #000000;
			margin-top: 50rpx;
		}

		.item-text {
			margin-top: 20rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;
		}

		.get-btn {
			width: 100%;
			height: 96rpx;
			background: #FFCC09;
			border-radius: 10rpx;
			margin: 0rpx auto;
			line-height: 96rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			margin-top: 30rpx;
		}

	}

	.close-btn {
		border: 4rpx solid white;
		border-radius: 50%;
		font-size: 40rpx;
		width: 80rpx;
		height: 80rpx;
		margin-top: 10rpx;
		line-height: 80rpx;
		text-align: center;
		color: white;
	}
}

.float-btn {
	position: fixed;
	right: 0rpx;
	top: 260rpx;
	width: 130rpx;
	height: 66rpx;
	background: #FFEFB3;
	border-radius: 33px 0px 0px 33px;
	padding: 0rpx 14rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-around;

	font-weight: 500;
	font-size: 24rpx;

	image {
		width: 30rpx;
		height: 36rpx;
	}

	&.my {
		top: 350rpx;

		image {
			width: 30rpx;
			height: 40rpx;
		}
	}

	&.share {
		top: 700rpx;

		.icon-wechat {
			font-size: 40rpx;
		}
	}

	&.rand-list {
		top: 800rpx;
		text-align: center;
		padding-left: 26rpx !important;

		.icon-wechat {
			font-size: 50rpx;
		}

		&::after {
			display: none;
		}
	}
}

.float-headimg-c {
	position: fixed;
	right: 0rpx;
	top: 460rpx;
	width: 140rpx;
	height: 100rpx;
	// display: flex;
	text-align: center;

	.headimg {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.score {
		font-size: 24rpx;
		font-weight: 500;
	}
}

.container {
	overflow: hidden;
	width: 100%;
	padding-top: 100rpx;
	padding-bottom: 120rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;

	.body {
		width: 100%;
		// border: 1px solid red;
	}
}

.yaoyiyao {
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	// animation-direction: reverse;

	image {
		width: 76rpx;
		height: 76rpx;
		animation: yaoyiyao 1s;
		animation-iteration-count: infinite;
		transform-origin: center;
	}

	text {
		color: rgba(51, 51, 51, 1);
		font-size: 24rpx;
		font-weight: bold;
	}

	&.small {
		image {
			width: 50rpx;
			height: 50rpx;
		}

		text {
			font-size: 24rpx;
		}
	}
}

@keyframes yaoyiyao {
	0% {
		transform: scale(1) rotate(-4deg);
	}

	25% {
		transform: rotate(0deg);
	}

	50% {
		transform: scale(1.1) rotate(4deg);
	}

	75% {
		transform: rotate(0deg);
	}

	100% {
		transform: scale(1) rotate(-4deg);
	}
}

.box {
	width: 360rpx;
	height: 540rpx;
	margin: 0 auto;
	margin-top: 4rpx;
	position: relative;

	&.small {
		width: 300rpx;
		height: 450rpx;
	}

	// &:after {
	// 	content: "";
	// 	position: absolute;
	// 	bottom: -50rpx;
	// 	width: 400rpx;
	// 	height: 100rpx;
	// 	border-radius: 50%;
	// 	background-color: #DCDFE6;
	// }
}

.box-img {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;

	// animation: box-animation 1s;
	// animation-iteration-count: infinite;
	// transform-origin: center;

	image {
		width: 100%;
		height: 100%;
	}
}

@keyframes box-animation {
	0% {
		transform: rotate(-2deg);
	}

	50% {
		transform: rotate(2deg);
	}

	100% {
		transform: rotate(-2deg);
	}
}

.box-img.move {
	animation: moving 1s;
	animation-fill-mode: forwards;
}

.box-img.move2 {
	animation: moving2 0.6s;
	animation-fill-mode: forwards;
}

@keyframes moving {
	0% {
		left: 0;
		transform: scale(1);
	}

	35% {
		left: 80rpx;
		transform: scale(0.6);
	}

	100% {
		left: -800rpx;
		transform: scale(0.6);
	}
}

@keyframes moving2 {
	0% {
		left: 0;
		top: -800rpx;
	}

	100% {
		left: 0;
		top: 0;
	}
}

.box-number {
	text-align: center;
	margin-top: 60rpx;
	font-size: 24rpx;
	font-weight: bold;
	color: #000;

	.inner-tips {
		font-weight: 400;
		margin-top: 20rpx;
	}
}

.card-list {
	display: flex;
	justify-content: center;
	margin-top: 30rpx;

	.item {
		width: 150rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #FFE78A;
		border-radius: 24rpx;
		font-size: 26rpx;

		&:last-child {
			margin-left: 30rpx;
		}

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}
}

.thumb-list {
	display: flex;
	white-space: nowrap;
	margin-top: 40rpx;

	.item {
		margin-right: 20rpx;
		display: inline-block;
		position: relative;

		&:first-child {
			margin-left: 20rpx;
		}

		.thumb {
			background: #F8EFC5;
			border: 4rpx solid #FFB640;
			border-radius: 6rpx;
			width: 150rpx;
			height: 200rpx;
		}

		.title {
			text-align: center;
			color: black;
			font-size: 24rpx;
			width: 150rpx;
			// height: 200rpx;
			// border: 1px solid red;
			font-weight: 500;

			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			line-clamp: 2;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.price-c {
			font-size: 22rpx;
			color: black;
			// font-weight: 500;
			width: 150rpx;
			text-align: center;

			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			line-clamp: 2;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.tips {
			position: absolute;
			top: -30rpx;
			width: 100%;
			background: rgba(0, 0, 0, 0.5);
			text-align: center;
			padding: 4rpx 0rpx;
			color: white;
			font-size: 24rpx;
			font-weight: 500;
		}

		.tips-bottom {
			position: absolute;
			top: 166rpx;
			width: 100%;
			background: rgba(0, 0, 0, 0.5);
			text-align: center;
			padding: 4rpx 0rpx;
			color: white;
			color: red;
			font-size: 22rpx;
			// font-weight: 500;

			&.showed {
				background: #2BA246;
				color: white;
			}
		}
	}

	&.small {
		.item {
			.thumb {
				width: 120rpx;
				height: 160rpx;
			}

			.title {
				width: 120rpx;
			}

			.tips-bottom {
				top: 130rpx;
			}
		}
	}
}

.footer {
	width: 100%;
	position: fixed;
	bottom: 0;


	.btns {
		padding-bottom: 40rpx;
		margin: 0 50rpx;
		display: flex;
		justify-content: space-between;

		.button {
			width: 304rpx;
			height: 80rpx;
			border-radius: 10rpx;
			background-color: #FFBF42;
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;
			line-height: 80rpx;
			box-shadow: 0 0 16rpx rgba(209, 209, 209, 0.5);
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}

			&:nth-child(1) {
				background: #FFBF42;
				border: 3rpx solid #FFFFFF;
			}

			&:nth-child(2) {
				color: black;
				background-color: white;
				box-shadow: 0px 18rpx 30px 0px rgba(255, 187, 42, 0.2);
			}

			&.disable {
				background: #BBB9B2;
				color: #f6f6f6;
			}
		}
	}

	&.small {
		.btns {
			padding-bottom: 50rpx;
		}
	}
}

.box-tips {
	position: fixed;
	top: 20%;
	left: 125rpx;
	width: 500rpx;
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 10rpx;
	padding: 50rpx 24rpx;
	color: #FFFFFF;
	font-size: 26rpx;
	box-sizing: border-box;
	z-index: 11100;
	text-align: center;


	.close-btn {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		color: #f1f1f1;
		font-size: 30rpx;
	}

	text {
		font-size: 30rpx;
		padding: 0 10rpx;
		font-weight: bold;
	}
}

@keyframes show {
	from {
		bottom: -480rpx;
	}

	to {
		bottom: 0;
	}
}

.container {
	&.dark {
		.yaoyiyao {
			text {
				color: #aaa;
			}
		}

		.box-number {
			color: #ddd;
		}

		.thumb-list {
			.title {
				color: #ddd;
			}
		}

		.float-headimg-c {
			color: #ddd;
		}
	}
}
</style>
